<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>

<style type="text/css">

    .triangle{
        width:0px;
        height:0px;
        border-right:6px solid transparent;
        border-left:6px solid transparent;
        border-bottom:6px solid #0984e3;

    }
    .line{
        border-bottom:2px solid #0984e3;
    }

    .btn_sel4{
        border: 1px solid #d1d1d1;
        border-radius: 3px;
        background: #fff;
       /* -webkit-box-shadow: 0 1px 0 #ccc;*/
        /*box-shadow: 0 1px 0 #ccc;*/
        font-size: 14px;
        height: 22px;
        margin-right: 10px;
    }
    /*需要切换的hover类*/
    .hover{
        background-color: #5352ed;
        color: white;
        /*font-weight: bold;*/
    }

</style>

<script type="text/javascript">
    // 鼠标移入移出事件
    $('.btn_sel4').hover(function() {
        // 鼠标移入时添加hover类
        $(this).addClass('hover')
    }, function() {
        // 鼠标移出时移出hover类
        $(this).removeClass('hover')
    });
</script>

<body>

<div style="width: 93%;margin-left: 30px;padding-bottom: 20px">
    <div class="row">
        <div>
            <span style="font-size: 25px; color: #0984e3 ">设置绑定同步</span>
        </div>
        <div class="triangle" style="margin-left: 20px"></div>
        <div class="line"></div>
    </div>
    <div class="row"  style="background-color:#ffffff; border: 1px solid #dbdbdb; height: 500px; margin-top: 10px ">
        <div style="padding: 5px 0px 0px 10px">
            <!--<span style="font-size: 18px">
                <b>设置绑定同步：</b>
            </span>
            <br>-->
            <span style="font-size: 13px">绑定第三方网站，可以使用第三方帐号进行直接登录。</span>
        </div>
        <div style="width: 100%; margin-top: 20px; padding-left: 50px">
            <div style="border: 1px solid #dfe4ea; width: 180px;height: 160px; margin-right: 35px; margin-top: 10px;  float: left;
                background: url(../../static/img/third/xinlang.png) no-repeat center 20px;">
                <div style="text-align: center; margin-top: 70px">
                    <p>新浪微博</p>
                    <input type="button" class="btn_sel4" value="账号绑定" name="">
                </div>
            </div>
            <div style="border: 1px solid #dfe4ea; width: 180px;height: 160px; margin-right: 35px; margin-top: 10px;  float: left;
                background: url(../../static/img/third/weixin.png) no-repeat center 20px;">
                <div style="text-align: center; margin-top: 70px">
                    <p>微信</p>
                    <input type="button" class="btn_sel4" value="账号绑定" name="">
                </div>
            </div>

        </div>
    </div>

</div>


</body>
</html>